<template>
  <section class="flex flex-col h-full">
    <el-form
      :model="queryParams"
      @submit.native.prevent
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="所属企业" prop="enterId">
        <el-select
          clearable
          filterable
          v-model="queryParams.enterId"
          placeholder="请选择所属企业"
          @change="outTenantChange"
          class="!w-200px"
        >
          <el-option
            v-for="item in tenantList"
            :key="item.id"
            :label="item.enterName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="客户企业" prop="cusId">
        <el-select
          clearable
          filterable
          v-model="queryParams.cusId"
          placeholder="请选择所属企业"
          class="!w-200px"
        >
          <el-option
            v-for="item in customerList"
            :key="item.customerId"
            :label="item.customerName"
            :value="item.customerId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="地址名称" prop="cusAddress">
        <el-input
          v-model="queryParams.cusAddress"
          :maxlength="50"
          placeholder="请输入地址名称"
          @keyup.enter="handleQuery"
          class="!w-200px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery"
          >搜索</el-button
        >
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="flex justify-between mb-16px">
      <div v-hasPermi="['unloadingAddress:add']">
        <el-button type="primary" @click="openForm()"
          >新增</el-button
        >
      </div>
      <div>
        <el-button v-if="false" @click="toggle">
          <el-tooltip
            effect="dark"
            content="全屏"
            placement="top-start"
          >
            <div style="width: 22px; height: 22px">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z"
                ></path>
              </svg>
            </div>
          </el-tooltip>
        </el-button>
      </div>
    </div>
    <el-table
      class="flex-1"
      ref="singleTableRef"
      v-loading="loading"
      :data="list"
      border
      stripe
      :header-cell-style="{
        background: '#F3F4F7',
        color: '#555'
      }"
      height="100%"
    >
      <el-table-column
        label="序号"
        align="left"
        width="65"
        fixed="left"
        :show-overflow-tooltip="true"
      >
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="所属企业"
        prop="enterName"
        min-width="120"
        fixed="left"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="客户企业"
        prop="cusName"
        min-width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="地址名称"
        prop="cusAddress"
        min-width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="省"
        prop="provinceName"
        min-width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="市"
        prop="cityName"
        min-width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="区/县"
        prop="countyName"
        min-width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="乡镇/街道"
        prop="townName"
        min-width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="操作"
        align="left"
        width="110"
        fixed="right"
      >
        <template #default="{ row }">
          <el-button
            link
            type="primary"
            @click="openForm(row.id)"
            v-hasPermi="['unloadingAddress:edit']"
          >
            编辑
          </el-button>
          <el-button
            link
            type="primary"
            @click="deleteData(row.id)"
            v-hasPermi="['unloadingAddress:delete']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </section>
  <FormDrawer ref="formDrawerRef" @success="resetQuery" />
</template>
<script setup lang="ts">
import * as authorizationManageApi from '@/api/authorizationManage'
import * as unloadingAddressApi from '@/api/unloadingAddress'
import FormDrawer from './formDrawer.vue'
import { useFullscreen } from '@vueuse/core'
import * as salesPlanApi from '@/api/salesPlan'

const loading = ref(false)
const tenantList = ref([])
const customerList = ref([])
const total = ref(0)
const list = ref([])
const formDrawerRef = ref()
const queryFormRef = ref()
const singleTableRef = ref()
const message = useMessage()
const { isFullscreen, toggle } =
  useFullscreen(singleTableRef)
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  enterId: undefined,
  cusId: undefined,
  cusAddress: undefined
})

const getOutTenantList = async () => {
  const res =
    await authorizationManageApi.getOutTenantList()
  tenantList.value = res || []
}

const outTenantChange = () => {
  customerList.value = []
  queryParams.value.cusId = undefined
  if (queryParams.value.enterId) {
    getCustomerList()
  }
}

const getCustomerList = async () => {
  const res =
    await unloadingAddressApi.getCustomerListByIdentity({
      outTenantId: queryParams.value.enterId,
      identity: 1
    })
  customerList.value = res || []
}

const router = useRouter()
const getList = async () => {
  loading.value = true
  try {
    const res =
      await unloadingAddressApi.getSaleCustomerAddressPage(
        queryParams.value
      )
    if (res.code === 0) {
      total.value = res.data?.total || 0
      list.value = res.data?.list || []
    } else if (res.code === 100910003) {
      await message.confirm(res.msg)
      refreshAuthorize()
    } else if (res.code === 100910004) {
      loading.value = false
      await message.confirm(res.msg)
      router.push({
        path: '/authManageCatalog/authorizationManage'
      })
    } else {
      message.error(res.msg)
    }
  } finally {
    loading.value = false
  }
}

const refreshAuthorize = async () => {
  await salesPlanApi.refreshAuthorize()
  getOutTenantList()
  getList()
}

const openForm = (id?) => {
  formDrawerRef.value.open(id)
}

const deleteData = async (id) => {
  await message.confirm('确定要删除吗?')
  const res = await unloadingAddressApi.deleteSaleCustomerAddress(id)
  if (res.code === 0) {
    message.success('删除成功')
    resetQuery()
  } else if (res.code === 100910003) {
    await message.confirm(res.msg)
    refreshAuthorize()
  } else if (res.code === 100910004) {
    await message.confirm(res.msg)
    router.push({path: '/authManageCatalog/authorizationManage'})
  } else {
    message.error(res.msg)
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  customerList.value = []
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 初始化 **/
onMounted(async () => {
  await getOutTenantList()
  getList()
})
</script>
<style lang="scss" scoped>
.el-button + .el-button {
  margin-left: 10px;
}

:deep(.el-table__header-wrapper .el-checkbox__inner) {
  display: none !important;
}

:deep(
    .el-table__header-wrapper .el-checkbox__input::after
  ) {
  content: '单选';
  color: rgb(85, 85, 85);
  font-weight: bold;
}

.th-text {
  font-size: 12px;
  color: #909399;
}

.el-table {
  :deep(.el-button) {
    height: 30px !important;
    line-height: 30px !important;
  }
}

:deep(.el-form-item--default) {
  margin-bottom: 16px;
}

:deep(.el-table .cell) {
  line-height: 30px;
}
</style>
